<script setup>
import { reactive, ref } from "vue";
import { addParkingApi,editParkingApi,getParkingInfo} from '@/api/parking.js'
import { communityListApi } from '@/hooks'
import { ElMessage } from 'element-plus'


const community = communityListApi()
const emit = defineEmits(['updateList'])

const formRef = ref('')
const isShow = ref(false)
//表单数据
const defaultState = 
    {
        community: '',
        name: '',
        community_code: ''
    }


const formData = reactive({ ...defaultState })
//验证规则
const formRule = {
    community_code: [{ required: true, message: '所属小区编号不可为空且检查类型', trigger: 'blur' }],
    name: [{ required: true, message: '车位不可为空', trigger: 'blur' }]

}
//关闭事件
const closeHandler = () => {
    //移除校验
    formRef.value.resetFields()
    //重置表单数据
    Object.assign(formData, { ...defaultState })
    //清空id
    formData.id=""
}
//表单提交
const onSubmit = async () => {  
    try {
        //数据校验
        await formRef.value.validate()
        //2.整理数据 
        //3.提交数据
        const data= toRaw(formData)
        formData.id ? await editParkingApi(data) : await addParkingApi(data)
        //提示成功
        ElMessage.success('操作成功')
        //关闭
        isShow.value = false
        //跟新列表
        emit('updateList')
    } catch (error) {
        console.log(error);
    }
}

//数据回显
const replyData = async (id) => {
    let res = await getParkingInfo(id)
    // console.log(res);
    isShow.value = true
  Object.assign(formData,res.data)
}
//标题优化（修改和新增）
const title = computed(() => {
    return formData.id ? '修改' : '新增'
})
defineExpose({
    isShow,replyData
})
</script>
<template>
    <el-drawer ref="formRef" v-model="isShow" :title="title" direction="rtl" size="40%" @close="closeHandler">
        <el-form :model="formData" :rules="formRule" ref="formRef" label-position="top">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="所属小区" prop="community_code" :label-width="formLabelWidth">
                        <el-select slot="prepend" placeholder="请输入" v-model="formData.community_code">
                            <el-option v-for="item in community" :key="item.id" :label="item.name" :value="item.code" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="车位名称" style="width: 200px;" prop="name" :label-width="formLabelWidth">
                        <el-input slot="prepend" placeholder="请输入" v-model="formData.name">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item :span="6" label="备注" style="width: 280px;" prop="remark">
                <el-input style="min-height: 35px;" type="textarea" placeholder="请输入" v-model="formData.remark"/>
            </el-form-item>
        </el-form>

        <div>
            <el-button @click="isShow = false">取消</el-button>
            <el-button type="primary" @click="onSubmit">
                确定
            </el-button>
        </div>
    </el-drawer>
</template>

<style lang="scss" scoped></style>